<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户管理</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="角色:">
        <el-select placeholder="请选择" v-model="role" style="width: 200px">
          <el-option label="普通用户" value="0"/>
          <el-option label="管理员" value="1"/>
          <el-option label="无" value="null"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getuserList">搜索</el-button>
        <el-button @click="role = null">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表 -->
    <el-table stripe max-height="900" :data="userlist"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-table-column label="id" prop="id"/>
      <el-table-column label="用户名" prop="username"/>
      <el-table-column label="昵称" prop="nickname"/>
      <el-table-column label="邮箱" prop="email"/>
      <el-table-column label="个性签名" prop="signature"/>
      <el-table-column label="创建时间">
        <template #default="scope">
          <span>{{formatDate(scope.row.createtime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
            <el-button type="danger" :icon="Delete" @click="userDelete(scope.$index,scope.row.id)" circle />
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next,jumper"
                     v-model:page-size="pageSize"
                     v-model:current-page="pageNum"
                     :total="total"
                     @size-change="onSizeChange"
                     @current-change="onCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {ref} from "vue"
import {userListService,deleteUserService} from '/src/api/Admin.js'

import {ElMessage,ElMessageBox } from "element-plus";

const pageNum = ref(1)   //当前页
const total = ref(0)            //总条数
const pageSize = ref(10)  //每页条数

const role = ref(null)

const userlist = ref([])

//加载数据等待遮罩
const loading = ref(true)

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getuserList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  getuserList()
}

//获取用户列表
const getuserList = async () => {

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    role: role.value ? role.value : null,
  }

  let result = await userListService(params)
  userlist.value = result.data.items
  total.value = result.data.total

  loading.value = false

}

// 删除用户
const userDelete =  (index,id) => {

  ElMessageBox.confirm(
      '您确定要删除这个用户吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {

        let result = await deleteUserService(id)

        ElMessage.success('删除成功!')
        userlist.value.splice(index,1)
      })
      .catch(() => {
        ElMessage.warning('取消删除!')
      })

}

//日期格式转换
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

</script>

<style scoped>
.page-container{
  min-height: 100%;
  box-sizing: border-box;
}

</style>